<!--营业概况-->
<template>
  <el-container>
    <el-header>
      <el-button class="float-left btn" type="primary" round>导出</el-button>
      <el-button class="float-right btn search-btn" type="primary" round>查询</el-button>
      <!-- 搜索按钮 -->
      <el-date-picker class="dataTime float-right" v-model="dataTime" type="datetimerange" :picker-options="pickerOptions2" range-separator="|"
        start-placeholder="2018-3-13 0:00:00" end-placeholder="2018-3-13 24:00:00" align="right" style="border: 1px solid #409EFF;
          border-radius:0;overflow:hidden;margin-top:15px;height:30px;line-height:30px;">

      </el-date-picker>
      <!-- 时间选择器 -->


      <el-select class="select-input float-right" v-model="value" :placeholder="lang._394" style="width:167px;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <!-- 全部支付方式 -->
      <el-select class="select-input float-right" v-model="value" :placeholder="lang._395" style="width:148px;border-radius:14px 0 0 14px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <!-- 全部收银员 -->
    </el-header>

    <!-- 顶部栏 -->

    <el-main>
      <el-table class="text-center tables" border :data="tableData" stripe header-cell-style="color:#409eff;background-color:#ECF5FF;text-align:center;font-size:15px;padding-left:0;padding-right:0">
        <el-table-column type="selection" width="40">
        </el-table-column>
        <el-table-column prop="uid" :label="lang._045" width="40">

        </el-table-column>
        <el-table-column prop="operate" :label="lang._028" width="40">
          <template slot-scope="scope">
            <el-button type="text">{{lang._078}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="orderTime" :label="lang._396" width="150">
        </el-table-column>
        <el-table-column prop="expectedDeliveryTime" :label="lang._397" width="110">
        </el-table-column>
        <el-table-column prop="order" :label="lang._398" width="80">
        </el-table-column>
        <el-table-column prop="orderStore" :label="lang._399" width="290">
        </el-table-column>
        <el-table-column prop="distributionOutlets," :label="lang._400" width="290">
        </el-table-column>
        <el-table-column prop="status" :label="lang._401" width="80">
        </el-table-column>
        <el-table-column prop="advance" :label="lang._402" width="80">
        </el-table-column>
        <el-table-column prop="shippingOrder" :label="lang._403" width="120">
        </el-table-column>
        <el-table-column prop="remark" :label="lang._027">
        </el-table-column>
      </el-table>
    </el-main>
    <!-- 内容栏 -->

    <el-footer>
      <el-checkbox class="float-left check-all-btn" v-model="checked">全选</el-checkbox>
      <el-button class="float-left btn" type="primary" round>汇总导出</el-button>
      <el-button class="float-left btn" type="primary" round>批量审核</el-button>
    </el-footer>
    <!-- 底部栏 -->
  </el-container>


</template>

<style lang="less" scoped>
  .btn {
    margin-top: 15px;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    margin-left: 20px;
    margin-right: 20px;
  }

  .el-header {
    .btn {
      margin-top: 15px;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .search-btn {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-top: 15px;
      border-radius: 0 14px 14px 0;
      margin-right: 20px;
      margin-left: 0;
    }
    .select-input {
      width: 149px;
      height: 28px;
      line-height: 28px;
      margin-top: 15px;
      border: 1px solid #409EFF;
      border-right: none;
      overflow: hidden;
    }
  }

  .el-footer {
    position: fixed;
    bottom: 0;
    width: calc(100% - 200px);
    .check-all-btn {
      color: #409EFF;
    }
  }

</style>

<style scoped>
  .el-header,
  .el-footer {
    background-color: #FFF;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    color: #333;
    text-align: center;
    /* line-height: 160px; */
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

</style>
<style>
  .el-input__inner {
    height: 28px;
    line-height: 28px;
    border: none;
    margin: 0;
  }

  .el-table .cell,
  .el-table th div,
  .el-table--border td:first-child .cell,
  .el-table--border th:first-child .cell {
    padding-left: 0;
  }

  .el-table .cell,
  .el-table th div {
    padding-right: 0;
  }

  .check-all-btn .el-checkbox__inner {
    border-radius: 50px;
  }

  .check-all-btn .el-checkbox__label {
    font-size: 18px;
  }

  .el-table {
    margin: 0;
  }

  .el-date-editor .el-range__icon {
    line-height: 22px;
  }

  .el-date-editor .el-range-input {
    line-height: 22px;
    float: left;
  }

  .el-date-editor .el-range-separator {
    line-height: 22px;
    float: left;
  }

</style>


<script>
  export default {
    props: ['lang'],
    data() {
      return {
        tableData: [{
          uid: '1',
          orderTime: '2017-8-12 12:00:99',
          expectedDeliveryTime: '2017-9-12',
          order: '苏',
          orderStore: 'Test Of Blue',
          distributionOutlets: '仓库',
          status: '待审核',
          advance: '123.00',
          shippingOrder: '9995965316351',
          remark: '加急'
        },{
          uid: '1',
          orderTime: '2017-8-12 12:00:99',
          expectedDeliveryTime: '2017-9-12',
          order: '苏',
          orderStore: 'Test Of Blue',
          distributionOutlets: '仓库',
          status: '待审核',
          advance: '123.00',
          shippingOrder: '9995965316351',
          remark: '加急'
        },{
          uid: '1',
          orderTime: '2017-8-12 12:00:99',
          expectedDeliveryTime: '2017-9-12',
          order: '苏',
          orderStore: 'Test Of Blue',
          distributionOutlets: '仓库',
          status: '待审核',
          advance: '123.00',
          shippingOrder: '9995965316351',
          remark: '加急'
        },{
          uid: '1',
          orderTime: '2017-8-12 12:00:99',
          expectedDeliveryTime: '2017-9-12',
          order: '苏',
          orderStore: 'Test Of Blue',
          distributionOutlets: '仓库',
          status: '待审核',
          advance: '123.00',
          shippingOrder: '9995965316351',
          remark: '加急'
        },],
        multipleSelection: []
        // 可选表格的数据
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }

</script>
